CSSクラス – Dart逆引きリファレンス

#Dart

稲毛透

2012.05.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

<<Prev

Next>>

<Index>

CSSクラス（CSS classes）

基本的には「Element」オブジェクトが持つ「classes」プロパティを操作します。「classes」プロパティは重複要素を許可しない配列である「Set」インタフェース型のオブジェクトです。

ExampleCSSclasses.html

<!DOCTYPE html>

<html>
  <head>
    <title>ExampleCSSclasses</title>
    <style type="text/css">
      .hello {
        color: #CCC;
        text-shadow: 3px 3px 2px black;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>ExampleCSSclasses</h1>
    <h2 id="toc-dart-is-not-running" id="status" class="hello">dart is not running</h2>
    <div><button id="btn-add">Add</button><button id="btn-remove">Remove</button></div>
    <script type="application/dart" src="ExampleCSSclasses.dart"></script>
    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

要素にクラス名を追加したい

「add」メソッドを使用してクラス名を追加します。

ExampleCSSclasses.dart

#import('dart:html');

void main() {
  HeadingElement status = document.query('#status');
  show('Hello, World!');
  
  document.query('#btn-add').on.click.add((event) => status.classes.add('red'));
  document.query('#btn-remove').on.click.add((event) => status.classes.remove('red'));
}

void show(String message) {
  document.query('#status').innerHTML = message;
}

要素から特定のクラス名を除去したい

「remove」メソッドを使用して特定のクラス名を除去します。

ExampleCSSclasses.dart

#import('dart:html');

void main() {
  HeadingElement status = document.query('#status');
  show('Hello, World!');
  
  document.query('#btn-add').on.click.add((event) => status.classes.add('red'));
  document.query('#btn-remove').on.click.add((event) => status.classes.remove('red'));
}

void show(String message) {
  document.query('#status').innerHTML = message;
}